<template>
	<view class="container">
		<view class="picture">
			<image :src="form.eimg"></image>
		</view>
		<view class="title">
			报名活动：<text class="activity-name">{{form.title}}</text>
		</view>
		<view class="title">
			支付金额：<text class="fee">{{form.price}}元</text>
		</view>

		<view class="bottom">
			<!-- <view>
				<view class="process-box">
					<view class="process-bar">
						<view class="process">
							<text class="finsh">1</text>
							<text class="finsh">2</text>
							<text>3</text>
						</view>
						<view class="line-bg">
							<view class="line"></view>
						</view>
					</view>

					<view class="process-tip">
						<text>账号设置</text>
						<text>缴费中</text>
						<text>完成报名</text>
					</view>
				</view>
				<view class="pic">
					<image src=""></image>
				</view>
				<view class="wx-tip">
					微信扫—扫使用小程序
				</view>
			</view> -->
			<button class="btn-finish" @click="toPay">立即报名</button>
		</view>
	</view>
</template>

<script>
	import {
		getDetailById
	} from '@/api/xiehui.js'
	import {
		createOrders,
		payOrder
	} from '@/api/order.js'
	export default {
		data() {
			return {
				id: '',
				orderId:'',
				form: {
					arvoAss: {
						alogo: ''
					},
				},
			}
		},
		onLoad(options) {
			console.log(options);
			this.id = options.id;
			this.orderId = options.orderId;
			this.getDetail();
		},
		methods: {
			getDetail() {
				getDetailById({
					id: this.id
				}).then((res) => {
					this.form = res.data;
				})
			},
			toPay() {
				// uni.showLoading({
				// 	title: "支付中",
				// 	mask: true
				// });
				payOrder(this.orderId, 'weixin', 'wechat')
					.then(res => {
						try{
							let payData=res.data.result.jsConfig;
							//if(payUrl)window.location.href=payUrl;
							uni.showToast({
								title:'报名成功！'
							})
							setTimeout(()=>{
								uni.redirectTo({
									url:'/pages/activityOrder/index'
								})
							},1000)
							//if(payData)this.onBridgeReady(payData);
						}catch(e){
							//TODO handle the exception
						}
						//uni.hideLoading()
					})
					.catch(err => {
						//uni.hideLoading()
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message || '订单支付失败',
							icon: "none",
							duration: 2000,
						});
					});
			},
			onBridgeReady(payData){
				let _this=this;
			   WeixinJSBridge.invoke(
			      'getBrandWCPayRequest', payData,
			      function(res){
					  console.log("支付状态："+res.err_msg);
			      if(res.err_msg == "get_brand_wcpay_request:ok" ){
			      // 使用以上方式判断前端返回,微信团队郑重提示：
			            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						uni.showToast({
							title:'支付成功'
						})
						setTimeout(()=>{
							uni.redirectTo({
								url:'/pages/activityOrder/index'
							})
						},1000)
			      } 
			   }); 
			},
		}
	}
</script>

<style lang="scss">
	image {
		width: 100%;
		height: 100%;
	}

	.container {
		padding: 0 30rpx;
		background-color: #fff;
		overflow-y: auto;

		.picture {
			width: 692rpx;
			height: 382rpx;
			margin-bottom: 38rpx;
			background-color: #ccc;
			border-radius: 12rpx;
		}

		.title {
			font-size: 32rpx;
			font-weight: 700;
			line-height: 60rpx;

			text {
				margin-left: 36rpx;
			}

			.activity-name {
				font-weight: 500;
			}

			.fee {
				color: #F61B22;
			}
		}

		// 下半部分
		.bottom {
			margin-top: 80rpx;
			text-align: center;

			.process-bar {
				position: relative;
				height: 88rpx;

				// 空进度条背景
				.line-bg {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					height: 4rpx;
					width: 460rpx;
					background-color: #ccc;
					z-index: 1;

					// 实际角度条
					.line {
						width: 50%;
						height: 100%;
						background-color: #F61B22;
						transition: width 1s;
					}
				}

				.process {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 2;
					display: flex;
					justify-content: space-between;
					background-color: transparent;
					width: 494rpx;
					margin: 0 auto;

					text {
						width: 38rpx;
						height: 38rpx;
						background-color: #ccc;
						border-radius: 50%;
						line-height: 38rpx;
						text-align: center;
						font-size: 28rpx;

						color: #fff;

						&.finsh {
							background-color: #F61B22;
							text-indent: -9999px;
							background-image: url(@/static/images/icon-ok.png);
							background-repeat: no-repeat;
							background-size: 100% 100%;
						}
					}
				}
			}

			.process-tip {

				display: flex;
				justify-content: space-around;
				width: 494rpx;
				margin: 0 auto;
				margin-bottom: 80rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
			}

			.pic {
				width: 310rpx;
				height: 310rpx;
				margin: 0 auto;
				margin-bottom: 28rpx;
				background-color: #ccc;
			}

			.wx-tip {
				margin-bottom: 60rpx;
				font-size: 28rpx;
				color: #171717;

			}

			.btn-finish {
				width: 592rpx;
				height: 90rpx;
				margin-bottom: 40rpx;
				background-color: #0F7CFF;

				border-radius: 50rpx;
				color: #fff;
				font-size: 34rpx;

			}

		}
	}
</style>
